{% extends "main.html" %}


{% block title %}Reports{% endblock %}

{% block description %}List of reports the HTTP Archive Tracks creates to track various aspects of the the web: State of the Web, State of JavaScript, State of Images, Loading Speed, Progressive Web Apps, Accessibility, SEO, Page Weight, Chrome User Experience Report, and Capabilities.{% endblock %}

{% block head %}
  {{ super() }}
  <link rel="stylesheet" href="{{ get_versioned_filename('/static/css/reports.css') }}" />
{% endblock %}

{% block main %}
  <section>
    <div class="row">
      <div class="container">
       <h1>All Reports</h1>
      </div>
    </div>
    {% for report in reports %}
    <div class="report row">
      <div class="container {{ loop.cycle('', 'alt') }}">
        <div class="col-lg-5 col-sm-6 col-md-6 col-xs-12 hidden-xs">
          <a href="{{ url_for('report', report_id=report.id) }}" title="{{ report.name }}">
            {{ report_graphic(report) }}
          </a>
        </div>
        <div class="col-lg-7 col-sm-6 col-md-6 col-xs-12">
          <h2>
            <a href="{{ url_for('report', report_id=report.id) }}">
              {{ report.name }}
            </a>
          </h2>

          {{ report.summary | markdown }}

          <a href="{{ url_for('report', report_id=report.id) }}" class="btn">View the {{ report.name }} Report</a>

        </div>
      </div>
    </div>
    {% endfor %}
  </section>
{% endblock %}
